<template>
	<view class="content">
		<view class="nav_wrap">
			<view class="title">疫苗预约</view>
			<view class="nav" >
				<view @click="toTurn(index)" class="nav_one" v-for="(item,index) in navList" :key="item.title">
					<image :src="item.image"></imgae>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="nav_wrap">
			<view class="title">挂号，体检预约</view>
			<view class="nav" >
				<view @click="turnGuaHao(item.title)" class="nav_one" v-for="item in yuyue" :key="item.title">
					<image :src="item.image"></imgae>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="nav_wrap">
			<view class="title">热门科室</view>
			<view class="nav" >
				<view :style="{color:item.background,fontSize:'20px'}" class="nav_one" v-for="item in hotList" :key="item.title">
					<image :src="item.image"></imgae>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="nav_wrap" style="margin-bottom:60px;">
			<view class="title">健康自测</view>
			<view class="nav"  >
				<view class="nav_one" @click="turnInfo(index)"  v-for="(item,index) in testList" :key="item.title">
					<image :src="item.image"></imgae>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	// uni-app 是一个使用 Vue.js 开发所有前端应用的框架，主要开发移动端
	// 开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序
	// （微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
	
	
	// uniapp 是vue语法 和小程序语法的结合
	//1. uniapp 组件选择使用 小程序的原生组件 或使用其他ui组件库
	//2. uiniapp 指令系统 采用的是 vue的 指令
	//3. js语法部分 采用的vue2的配置项和小程序的生命周期混用
	//4. 小程序的api 完全可用 从wx.方法 变为 uni。方法() 如wx.request变为 uni.reqest
	
	
	// uView ui组件多  也有使用uni-ui 
import {getIndexNav} from '@/api/home.js'
	export default {
		data() {
			return {
				 navList:[],//疫苗预约导航
				 yuyue:[],//预约挂号体检
				 hotList:[],//热门科室
				 testList:[]//测试模块
			}
		},
		onLoad() 
		{
		   this.getNav()
			
		},
		
		onPullDownRefresh(){
			console.log("下拉了")
		},
		onReachBottom(){},
		onShareAppMessage(){},
		methods: {
			turnGuaHao(title){
				if(title=="预约挂号"){
					uni.navigateTo({
						url:"/pages/guaHao/index"
					})
				}
			},
			turnInfo(index){
				if(index==0){
					uni.navigateTo({
						url:"/pages/yiYu/index"
					})
				}
			},
			async getNav(){//获取首页数据接口
				let res=await getIndexNav()
				console.log(res,"------------")
				this.navList=res.data[0].vaccine;
				this.yuyue=res.data[1].reserve;
				this.hotList=res.data[2].popular;
				this.testList=res.data[3].self_test;
			},
			toTurn(index){
				if(index==0){ //新冠预约页面
					uni.navigateTo({
						url:"/pages/xingaunTime/index"
					})
				}
				
				if(index==3){ //去到图文问诊
					uni.navigateTo({
						url:"/pages/wenzhen/tuWen"
					})
				}
				
			}
			
		}
	}
</script>

<style lang="scss">
	.nav_wrap{
		width:100vw;
		.title{
			font-size: 20px;
			margin: 20px 0;
			padding: 30px;
			box-sizing: border-box;
		}
		.nav{
			width:100vw;
			display: flex;
			justify-content: space-between;
			padding: 0 20px; 
			box-sizing: border-box;
			align-items: center;
			font-size: 30px;
			flex-wrap: wrap;
		
			.nav_one{
				width: 18vw;
				height: 200px;
				text-align: center;
				margin-top: 20px;
				image{
					width: 100%;
					height: 180px;
				}
			}
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
